<template>
	<view v-if="menus" style="display: flex;flex-wrap: wrap;" :class="noQita ? 'no-qita-acitve' : ''">
		<view class="tag" v-for="(item,index) in menu" :key='index' :class="{active: item.show}" @click="menusClick(item,index)">
			{{item.title}}
		</view>
		<view v-if="!noQita" style="border-radius: 30upx;padding: 10upx;color: #666;margin: 10upx;border: 2upx solid #666;width: 90upx;">
			<input type="text" placeholder="其它" v-model="qita" @blur='qitainput' />
		</view>
	</view>
</template>

<script>
	export default {
		props: ["menus", "menuLists", "noQita"],
		data() {
			return {
				menu: this.menus,
				menuList: this.menuLists,
				qita: "",
			}
		},
		created() {
			console.log(this.menu, this.menuList)
		},
		methods: {
			menusClick(item, index) {
				this.menu[index].show = !this.menu[index].show
				this.menuList = this.menu.filter(item => item.show);
				this.$emit("menusClick", [this.menu, this.menuList]);
				console.log('menuitem里出来的', [this.menu, this.menuList])
			},
			qitainput(e) {
				this.qita = e.detail.value
				if (this.qita !== '' && this.qita !== null) {
					let newtag = {
						title: this.qita,
						show: false,
					}
					this.menu.push(newtag);
				}
				this.qita = '';
				this.$emit("qitainput", this.menu)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tag {
		border-radius: 30upx;
		background-color: #fff;
		padding: 10upx;
		color: #666;
		margin: 10upx;
		border: 2upx solid #666;
	}

	.active {
		background-color: #39BB9E;
		color: #fff;
		border: 2upx solid #39BB9E;
	}
	.no-qita-acitve {
		padding: 16rpx 30rpx;
		box-sizing: border-box;
	}
</style>
